<template>
  <div class="controller">
    <el-container>
      <el-header></el-header>
      <el-main>
        <el-divider></el-divider>
        <div class="block" style="margin-top: 4%">
          <span class="demonstration" style="color: crimson;">悦听，畅享音乐</span>
          <el-carousel height="200px">
            <el-carousel-item v-for="item in 4" :key="item">
              <img :src="srcList[item - 1]" alt="幻灯片" style="height: 100%;width: 100%">
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-divider></el-divider>
        <el-input placeholder="搜索歌曲" style="max-width: 80%;" v-model="query" @change="searchMusic">
          <el-button slot="append" icon="el-icon-search" @click="searchMusic"></el-button>
        </el-input>
        <el-divider></el-divider>
        <div class="m-player-disk">
          <el-divider></el-divider>
          <el-tag type="danger" effect="dark">单曲</el-tag><h2 style="display: inline;margin-left: 1em;color: sienna">{{ contentMusic.name }}</h2>
          <div class="song-info">
            歌手：<span style="color: mediumblue">{{contentMusic.artist}}</span><br>
            所属专辑：<span style="color: mediumblue">{{contentMusic.album}}</span>
            <br>
            <br>
            <el-button type="primary" style="padding: 6px 6px;margin-right: 5px" round @click="playMusic(contentMusic.musicId, contentMusic.name, contentMusic.artist, contentMusic.album)"><i class="el-icon-video-play" style="width: 10px"></i>&nbsp;&nbsp;开始播放</el-button>
            <a href="javascript: void(0);" @click="read">查看评论<i class="el-icon-chat-line-round" style="width: 10px"></i></a>
          </div>
          <el-divider></el-divider>
          <div class="m-disc-container" style="margin-bottom: 330px">
            <div class="m-disc-img" style="width: 260px;position: relative">
              <div class="player_con" :class="{playing: isPlaying}" style="position: relative">
                <img src="../assets/player_bar.png" class="play_bar" style="height: auto;width: auto\9;width: 50%">
                <img src="../assets/disc.png" class="disc autoRotate" style="height: auto;width: auto\9;width: 100%">
                <img :src="musicCover" class="cover autoRotate" style="height: auto;width: auto\9;width: 65%">
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="audio_con" style="margin-top: 5px">
            <audio ref="audio" @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
          </div>
          <div class="video_con" style="display:none;width: 100%;height: auto" v-show="isShow">
            <video :src="mvUrl" controls="controls" autoplay></video>
            <div class="mask" @click="hide"></div>
          </div>
        </div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>歌曲列表</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="playMusic(musicList[0].id, musicList[0].name, musicList[0].artists[0].name, musicList[0].album.name)">开始播放</el-button>
          </div>
          <div v-for="item in musicList" class="text item">
            <a href="javascript:;" class="m-play-icon" @click="playMusic(item.id, item.name, item.artists[0].name, item.album.name)"></a>
            <b class="song-name">{{item.name}}</b>
            <i class="song-singer" >{{item.artists[0].name}}</i>
            <span style="display: block" class="mv-play" v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span>
          </div>
        </el-card>
        <div class="m-commets">
          <div class="comment_wrapper">
            <h3 class="title" style="color: brown">热门评论</h3>
            <div class="comment_list">
              <dl v-for="comment in hotComments">
                <dt>
                  <img :src="comment.user.avatarUrl" alt="">
                </dt>
                <dd class="name">{{comment.user.nickname}}</dd>
                <dd class="detail">{{comment.content}}</dd>
              </dl>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <div style="margin-top: 10px">
          &copy;聆听音乐 · Powered by 2021 hzx
          <br>
          Themed Amazed by hzx
        </div>
        <img src="../assets/wechat.png" style="height: 100px;margin-top: 10px">
      </el-footer>
    </el-container>
  </div>
</template>

<script>
var xhr = new XMLHttpRequest();
export default {
  name: "MusicPro",
  data() {
    return {
      // 查询关键字
      query: "",
      // 歌曲数组
      musicList: [],
      // 歌曲地址
      musicUrl: "",
      // 歌曲封面
      musicCover: "",
      // 歌曲评论
      hotComments: [],
      // 歌曲播放状态
      isPlaying: false,
      // 遮罩层的显示状态
      isShow: false,
      // mv地址
      mvUrl: "",
      ison: true,
      contentMusic: {
        musicId: '',
        name: '',
        artist: '',
        album: ''
      },
      srcList: [
          require("../assets/ppt1.jpg"),
          require("../assets/ppt2.jpg"),
          require("../assets/ppt3.jpg"),
          require("../assets/ppt4.jpg"),
      ]
    }
  },
  methods: {
    searchMusic() {
      xhr.open("get", "https://autumnfish.cn/search");
      xhr.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:63342");
      this.$axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(response=>{
        //console.log(response);
        this.musicList = response.data.result.songs;
      }).catch(error=>{
        console.log(error);
      })
    },
    playMusic(musicId, name, artist, album) {
      //console.log(musicId);
      // 获取歌曲地址
      if(!musicId){
        alert("没有该歌曲的任何信息");
        return ;
      }
      this.contentMusic.musicId = musicId;
      this.contentMusic.name = name;
      this.contentMusic.artist = artist;
      this.contentMusic.album = album;

      this.$axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(response=>{
        //console.log(response.data.data[0].url);
        //console.log(response);
        this.musicUrl = response.data.data[0].url;
      }).catch(error=>{
        console.log(error);
      })

      // 歌曲详情获取
      this.$axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(response=>{
        //console.log(response);
        this.musicCover = response.data.songs[0].al.picUrl;
      }).catch(error=>{
        console.log(error);
      })

      // 歌曲评论获取
      this.$axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(response=>{
        //console.log(response);
        this.hotComments = response.data.hotComments;
        //console.log(response.data.hotComments);
      }).catch(err=>{
        console.log(err);
      })
      this.switch();
    },
    play() {
      //console.log("play");
      this.isPlaying = true;
    },
    pause() {
      //console.log("pause");
      this.isPlaying = false;
    },
    playMv(mvid) {
      this.$axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(response=>{
        //console.log(response);
        var url = response.data.data.url;
        this.isShow = true;
        this.mvUrl = url;
      }).catch(err=>{
        console.log(err);
      })
    },
    // 隐藏
    hide() {
      this.isShow = false;
      document.getElementsByTagName("video")[0].pause();
    },
    // 暂停和播放
    switch() {
      var audio = document.getElementsByClassName("myaudio")[0];
      if (this.isPlaying){
        audio.pause();
      } else{
        audio.play();
      }
    },

    read() {
      scrollTo(200,6666);
    }
  }
}
</script>

<style scoped>

.controller{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}


.el-header{
  background: url("../assets/bg3.jpg") no-repeat;
  background-size: 100% 100%;
  color: #333;
  text-align: center;
  height: 8em !important;
}

.el-footer{
  background-color: #363535;
  min-height: 200px;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  min-height: 90em;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  min-height: 70em;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {

}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  text-align: left;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  min-width: 250px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.m-player-disk{
  margin-top: 2em;
}
.m-disc-img{
  max-width: 80%;
  text-align: center;
  margin: 0 auto;
  padding-top: 3px;
}

.m-commets{
  margin-top: 10em;
  border: 1px orange solid;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.m-play-icon{
  margin-top: 2px;
  display: block;
  float: left;
  width: 15px;
  height: 15px;
  background-image: url("../assets/play.png");
  background-size: 100%;
  margin-right: 5px;
  box-sizing: border-box;
}

.song-name{
  width: 35%;
  display: inline-block;
  margin-left: 10px;
  margin-right: 4px;
  font-weight: normal;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap;
}
.song-singer{
  display: inline-block;
  width: 26%;
  margin-left: 2%;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mv-play{
  width: 25px;
  height: 25px;
  margin-right: 3%;
  float: right;
}
.mv-play i{
  display: block;
  width: 84%;
  height: 84%;
  cursor: pointer;
  background: url("../assets/table.png") no-repeat;
  background-size: cover;
}
.disc {
  position: absolute;
  top: 1.5em;
  left: 0;
  z-index: 9;
}
.cover {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 4.3em;
  left: 40px;
  border-radius: 7.5em;
  z-index: 8;
  /*cursor: pointer;*/
}

.comment_wrapper .comment_list {
  overflow: auto;
}

.comment_wrapper .comment_list::-webkit-scrollbar {
  display: none;
}

.comment_wrapper dl {
  padding-top: 1.0rem;
  padding-left: 5.5rem;
  position: relative;
  margin-bottom: 2.0rem;
}

.comment_wrapper dt {
  position: absolute;
  left: 0.4rem;
  top: 1.0rem;
}
.comment_wrapper dt img {
  width: 4.0em;
  height: 4.0em;
  border-radius: 2.0em;
}
.comment_wrapper dd {
  font-size: 1.2em;
}

.comment_wrapper .name {
  font-weight: bold;
  color: #333;
  padding-top: 0.5em;
}
.comment_wrapper .detail {
  color: #666;
  margin-top: 0.5rem;
  line-height: 1.8rem;
}
.audio_con {
  height: 35px;
  background-color: #ffffff;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
}
.myaudio {
  height: 35px;
  width: 90%;
  outline: none;
  background-color: #ffffff;
}
/* 旋转的动画 */
@keyframes Rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
/* 旋转的类名 */
.autoRotate {
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}
/* 是否正在播放 */
.playing .disc,
.playing .cover {
  animation-play-state: running;
}

.play_bar {
  position: absolute;
  top: 0.3em;
  z-index: 10;
  transform: rotate(-25deg);
  transform-origin: 1.2rem 1.2rem;
  transition: 1s;
}
/* 播放杆 转回去 */
.playing .play_bar {
  transform: rotate(0);
}

.video_con video {
  position: fixed;
  width: 80%;
  height: auto;
  left: 50%;
  top: 50%;
  margin-top: -22.5%;
  transform: translateX(-50%);
  z-index: 990;
}
.video_con .mask {
  position: fixed;
  width: 100%;
  height: 100%;
  margin-top: 0;
  left: 0;
  top: 0;
  z-index: 980;
  background-color: rgba(0, 0, 0, 0.8);
}
.video_con .shutoff {
  position: fixed;
  width: 4.0rem;
  height: 4.0rem;
  background: url("../assets/shutoff.png") no-repeat;
  left: 50%;
  margin-left: 40.0rem;
  /*margin-top: -27.3rem;*/
  top: 50%;
  z-index: 995;
}
</style>